<template>
    <div>
        <div class="chart_header">
            <div class="header_left">
                <i class="picture_point"></i>
                <span class="picture_text">图片（张）</span>
            </div>
            <div class="header_right">
                <i class="cloud_point"></i>
                <span class="cloud_text">点云（张）</span>
            </div>
        </div>
        <div ref="labelChart" style="width:100%;height:180px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { importLabelChatData, importLabelQueryData } from '../../homePage/components/listPage/dataAccess/api/echartsChatApi'
import { labelScreenOption } from '../../../utils/js/point'
export default {
    data() {
        return {
            allData: [],
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        async chartRender(params) {
            if (params == '全部') {
                this.getData();
            } else {
                const res = await importLabelQueryData(params)
                this.allData = res.data.data;
                this.initChart();
            }
        },
        async getData() {
            const res = await importLabelChatData()
            this.allData = res.data.data;
            this.initChart();
        },
        initChart() {
            var imageData = this.allData.filter(item => {
                return item.annotate_data === 0;
            })
            var pointData = this.allData.filter(item => {
                return item.annotate_data === 1;
            })
            var leftData = imageData.map(item => {return item.annotate_number})
            var rightData = pointData.map(item => {return item.annotate_number})
            var XcoordinateData = imageData.map(item => {return item.annotate_vendor})
            var myChart = echarts.init(this.$refs.labelChart);
            labelScreenOption.yAxis.data = XcoordinateData;
            labelScreenOption.series[0].name = '图片（张）';
            labelScreenOption.series[0].data = leftData;
            labelScreenOption.series[1].data = rightData;
            labelScreenOption.series[1].name = '点云（张）';
            myChart.setOption(labelScreenOption);
            // 图表自适应
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }  
    }
}
</script>

<style>
</style>